<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>组件插槽</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.container {
				width: 600px;
				min-height: 150px;
				border: 1px solid black;
				background-color: pink;
				height:auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
              <name-slot>
				  <h5 slot="header">这是头部内容</h5>
				  <h5>主要内容-1 {{info}}</h5>
				  <h5>主要内容-2</h5>
				  <h5 slot="footer">这是页脚内容</h5>
			  </name-slot>
		</div>
		<script>
			Vue.component('name-slot', {
				template: `<div class="container">
				              <header>
							    <slot name='header'></slot>
							  </header>
							  <main>
							    <slot></slot>
							  </main>
							  <footer>
							     <slot name='footer'></slot>
							  </footer>
				           </div>`
			})

			//1. 实例化一个Vue的实例
			let vm = new Vue({
				el: '#app',
				data: {
                   info:'这是响应式的数据'
				}
			});
		</script>
	</body>
</html>
